<template>
    <div class="charts">
        <div class="linkage">
            <div class="chart-card ship">
                <div class="relation" id="relation"></div>
            </div>
            <div class="chart-card progress">
                <h3>开发语言占比</h3>
                <span>Vue:<a-progress :percent="83.7" /></span>
                <span>JavaScript:<a-progress :percent="11.2" /></span>
                <span>CSS:<a-progress :percent="2.9" /></span>
                <span>Vue:<a-progress :percent="2.2" /></span>
            </div>
        </div>

        <div class="chart-card linkage">
            <h4>简单联动</h4>
            <!-- 饼图 -->
            <div id="pie" class="pie"></div>
            <!-- 柱状图 -->
            <div id="column" class="column"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';

onMounted(() => {
    loadDigram();
    loadPie();
    loadColumn();
})

// 关系图
const loadDigram = () => {
    var chartDom = document.getElementById('relation');
    var myChart = echarts.init(chartDom);
    var option;

    let data = {
        nodes: [{
            name: '系统管理',
            category: 0
        }, {
            name: 'xx管理系统',
            category: 0
        }, {
            name: '富文本编辑器',
            category: 0
        }, {
            name: 'echarts图表',
            category: 0
        }, {
            name: '用户',
            category: 1
        }, {
            name: '管理员',
            category: 1
        }],

        links: [{
            source: '系统管理',
            target: 'xx管理系统',
            name: '模块'
        }, {
            source: '富文本编辑器',
            target: 'xx管理系统',
            name: '模块'
        }, {
            source: 'echarts图表',
            target: 'xx管理系统',
            name: '模块'
        }, {
            source: '用户',
            target: 'xx管理系统',
            name: '部分权限'
        }, {
            source: '管理员',
            target: 'xx管理系统',
            name: '维护'
        }, {
            source: '用户',
            target: 'echarts图表',
            name: '自定义'
        }]
    }

    const color1 = '#006acc';
    const color2 = '#ff7d18';
    const color3 = '#10a050';

    data.nodes.forEach(node => {
        if (node.category === 0) {
            node.symbolSize = 100;
            node.itemStyle = {
                color: color1
            };
        } else if (node.category === 1) {
            node.itemStyle = {
                color: color2
            };
        }
    });

    data.links.forEach(link => {
        link.label = {
            align: 'center',
            fontSize: 12
        };

        if (link.name === '模块') {
            link.lineStyle = {
                color: color2
            }
        } else if (link.name === '部分权限') {
            link.lineStyle = {
                color: color1
            }
        } else if (link.name === '自定义') {
            link.lineStyle = {
                color: color3
            }
        }
    });

    let categories = [{
        name: '模块',
        itemStyle: {
            color: color1
        }
    },
    {
        name: '用户',
        itemStyle: {
            color: color2
        }
    }]

    option = {
        title: {
            text: "系统概览"
        },
        legend: [{
            // selectedMode: 'single',
            data: categories.map(x => x.name),
            // icon: 'circle'
        }],
        series: [{
            type: 'graph',
            layout: 'force',
            symbolSize: 58,
            draggable: true,
            roam: true,
            focusNodeAdjacency: true,
            categories: categories,
            edgeSymbol: ['', 'arrow'],
            // edgeSymbolSize: [80, 10],
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 20
                    },
                    formatter(x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                show: true
            },
            force: {
                repulsion: 2000,
                edgeLength: 120
            },
            data: data.nodes,
            links: data.links
        }]
    }

    option && myChart.setOption(option);
}

const collegeList = [{
    id: 'c01',
    name: '土木学院',
    pro: ["土木工程", "智能建造", "桥梁工程", "水利工程"],
    nums: ["200", "300", "310", "238"]
}, {
    id: 'c02',
    name: '信息学院',
    pro: ["计算机科学与技术", "软件工程", "数字媒体", "网络安全"],
    nums: ["350", "200", "100", "85"]
}, {
    id: 'c03',
    name: '机械学院',
    pro: ["机械工程", "工业设计", "车辆工程", "机电技术"],
    nums: ["250", "100", "100", "180"]
}, {
    id: 'c04',
    name: '法学院',
    pro: ["司法警察学", "国际法", "经济法", "刑法"],
    nums: ["200", "50", "84", "150"]
}, {
    id: 'c05',
    name: '文学院',
    pro: ["汉语言文学", "甲骨文", "英语", "日语"],
    nums: ["150", "50", "70", "30"]
}
]

// 饼图
const loadPie = () => {
    var chartDom = document.getElementById('pie');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '学校各学院人数占比',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                name: '人数',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '土木学院', id: 'c01' },
                    { value: 735, name: '信息学院', id: 'c02' },
                    { value: 580, name: '机械学院', id: 'c03' },
                    { value: 484, name: '法学院', id: 'c04' },
                    { value: 300, name: '文学院', id: 'c05' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);

    myChart.on('click', function (params) {
        console.log(params)
        const id = params.data.id;
        const collegeObj = collegeList.find(item => item.id === id);
        xData.value = collegeObj.pro;
        seriesValue.value = collegeObj.nums;
        loadColumn();
    })
}

// 柱状图
const xData = ref(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'])
const seriesValue = ref([120, 200, 150, 80, 70, 110, 130])
const loadColumn = () => {
    var chartDom = document.getElementById('column');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        xAxis: {
            type: 'category',
            data: xData.value,
            axisLabel: {
                rotate: 45,
                interval: 0
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: seriesValue.value,
                type: 'bar'
            }
        ]
    };
    option && myChart.setOption(option);


}

</script>

<style scoped>
.charts {
    height: calc(100vh-120px);
    overflow-y: auto;
    padding: 10px;
}

.chart-card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
}

.ship {
    width: 45%;
    display: flex;
    gap: 30px;
}
.progress {
    width: 45%;
    padding: 12px;
}

.relation {
    width: 100%;
    height: 450px;
}

.pie {
    width: 45%;
    height: 400px;
}

.column {
    width: 45%;
    height: 400px;
}

.linkage {
    display: flex;
    gap: 20px;
    padding: 20px;
}
</style>